Using stacking order to simulate relative motion

Floating Boxes > Using stacking order to simulate relative motion

The stacking order, also known as the z-index, is a unique property of floating boxes. In animations with multiple objects, you can use this property to determine which object should appear on top when the paths of two or more floating boxes cross. You can also use the stacking order to simulate more complex effects of relative motion--for example, by letting one floating box revolve around another.

Like the other floating box properties, you can control the stacking order for the time span between any two keyframes on the same time track. To produce the visual effect of stacking, however, this property must be set for at least two synchronous or overlapping time spans on two different time tracks within the same scene.

The following example is based on a simple animation that simulates relative motion. It is a palindrome that consists of two objects; a stationary floating box with a GIF image and an animated floating box with text content. Four keyframes, each on two time tracks, control the animation, subdividing it in four phases. The test box remains on top until the final phase, when it moves behind and is hidden by the image box.

1. First keyframe position 2. Second keyframe position 3. Third keyframe position 4. Fourth keyframe position

To create an animation with one stationary object and an animated object revolving around it:

1 Insert two floating boxes and add content--for example, add an image to one box and formatted text to the other.

2 Select the image box that is to remain stationary, position it on the page, and place three keyframes on its time track in the TimeLine Editor.

3 To ensure that the image box is stationary, select the first keyframe of the image box. Then click on each keyframe. The position should be the same for all four keyframes to prevent the image box from jumping during playback. If in doubt, click all four keyframes to check the positions in the Top and Left text boxes of the Floating Box Inspector. Correct any pixel offset by hand-editing the top and left coordinates for each keyframe, if necessary.

4 Click the Loop () and Palindrome () buttons in the TimeLine Editor to play the animation in an endless loop.

5 Click the Play button () to preview the stationary object. The image box shouldn't move. If any motion occurs, return to step 4 and correct the Top and Left coordinates.

6 Select the second box (the text box), and insert three additional keyframes on its time track in the TimeLine Editor. Place each keyframe directly below the image box keyframes to synchronize them.

Two time tracks in the TimeLine Editor. Each holds four keyframes.

7 Define the four positions (corresponding to the four keyframes) of the text box relative to the image box:

Select the first keyframe of the text box; then drag the text box to a position to the left of the image box, aligning it vertically with the center of the image box.

Select the second keyframe of the text box; then drag the text box horizontally on top of the image box.

Select the third keyframe of the text box; then drag the text box horizontally to the right of the image box.

Select the last keyframe of the text box, then drag the text box horizontally on top of the image box.

8 Define the stacking order for all four keyframes, both for the text box and image box:

Select the first keyframe of the text box. In the Floating Box Inspector, enter 2 in the Depth text box.

Select the first keyframe of the image box. In the Floating Box Inspector enter 1 in the Depth text box.

A. Current coordinates B. Selects the shape of the animation path C. Selects a keyframe color D. Sets the stacking order E. Sets visibility

9 Repeat step 9 for the second and third keyframes to stack the text box on top of the image box.

10 Reverse the stacking order for the time span after the last keyframe:

Select the last keyframe of the text box in the Floating Box Inspector and enter 1 in the Depth text box.

Select the last keyframe of the image box. Enter 2 in the Depth text box of the Floating Box Inspector.

11 Click the Play button () to preview your animation. On returning from the farthest right point of the animation path, the text box should disappear behind the image box.

Floating Boxes > Using stacking order to simulate relative motion